<template>
<div class="gedanbeijing">
<ListTop :playlist="state.playlist"/>
<ItemMusicList :itemList="state.itemList" :subscribedCount="state.playlist.subscribedCount"/>
</div>
</template>

<script>
import{useRoute} from'vue-router';
import{onMounted, reactive} from'vue';
import { getMusicItemList ,getItemList} from '../api/home/item'
import ItemMusicList from '../components/item/ItemMusicList.vue'
import ListTop from'../components/item/ListTop.vue'
export default {
    setup() {
        const state=reactive({
            playlist:{},
            itemList:[]
        });
        onMounted( async()=>{
            let id=useRoute().query.id;
            console.log(id);
            //获取歌单详情页

            let res =await getMusicItemList(id);
            console.log(res);
            state.playlist=res.data.playlist
            //获取歌单歌曲
            let result=await getItemList(id);
            console.log(result);
            state.itemList=result.data.songs
             //防止页面刷新，数据丢失
            sessionStorage.setItem("itemDetail",JSON.stringify(state));
        });
        return {state}
    },
    components:{
        ListTop,
        ItemMusicList,
    }
}
</script>
<style>
.gedanbeijing{
     background-image: url(../image/beijing1.jpg);
}
</style>